<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>登陆</title>
    <link rel="stylesheet" href="css/login.css">
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<header>
    <div class="logo">
        <img src="img/logo.png" alt="购物网站标志">
    </div>
    <div class="user-info">
        <a href="home.html">回到首页</a>
    </div>
</header>

<div class="login-container">
    <h2>登录</h2>
    <p id="error-message" class="error-message"></p>
    <form id="loginForm" class="login-form">
        <label for="username">用户名:</label>
        <input type="text" id="username" name="username" required><br>

        <label for="password">密码:</label>
        <input type="password" id="password" name="password" required><br>

        <div class="captcha-container">
            <img id="captcha-img" src="" alt="验证码">
            <a href="#" id="captcha-refresh" onclick="refreshCaptcha()">换一张</a>
        </div>
        <label for="captcha">验证码:</label>
        <input type="text" id="captcha" name="captcha" required><br>

        <input type="submit" value="登录" class="submit-button">

        <p>没有账号？<a href="#" onclick="goToRegister()" class="register-link">注册</a></p>
    </form>
</div>

<footer>
    <p>&copy; 我的购物网站 。</p>
</footer>

<script>
    function refreshCaptcha() {
        $('#captcha-img').attr('src', '/captcha?' + new Date().getTime());
    }

    $(document).ready(function() {
        $('#captcha-img').attr('src', '/captcha');  // 页面加载时显示初始验证码图片
        $('#loginForm').on('submit', mysub);
    });

    function mysub(event) {
        event.preventDefault(); // 阻止表单默认提交

        const username = $('#username').val();
        const password = $('#password').val();
        const captcha = $('#captcha').val();
        const errorMessage = $('#error-message');

        // 验证输入
        if (!username) {
            errorMessage.text("请先输入用户名");
            $('#username').focus();
            return;
        }
        if (!password) {
            errorMessage.text("请先输入密码！");
            $('#password').focus();
            return;
        }
        if (!captcha) {
            errorMessage.text("请输入验证码！");
            $('#captcha').focus();
            return;
        }

        $.ajax({
            url: "/user/login",
            method: "post",
            data: {
                username: username,
                password: password,
                captcha: captcha
            },
            success: function(result) {
                if (result.state === 200) {
                    showAlert("登陆成功");
                    setTimeout(() => {
                        location.href = "home.html";
                    }, 1000);
                } else {
                    console.log(result);
                    errorMessage.text(result.msg || "登录失败，请重试。");
                    $('#username').focus();
                }
            },
            error: function() {
                errorMessage.text("请求失败，请稍后再试。");
            }
        });
    }

    function showAlert(message) {
        const alertBox = document.createElement('div');
        alertBox.className = 'alert-box';
        alertBox.textContent = message;
        document.body.appendChild(alertBox);
        setTimeout(() => {
            alertBox.classList.add('fade-out');
            setTimeout(() => {
                alertBox.remove();
            }, 500);
        }, 1000);
    }

    function goToRegister() {
        window.location.href = "register.html";
    }
</script>

</body>
</html>
